<template>
  <div class="watch3">
    <h1>情况三：监视reactive定义的对象类型数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
    <hr />
    <h2>测试：{{ obj.a.b.c }}</h2>
    <button @click="test">修改obj.a.b.c</button>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from "vue";
// 数据
let person = reactive({ name: "张三", age: 12 });
let obj = reactive({ a: { b: { c: 666 } } });
// 方法
function changeName() {
  person.name += "~";
}
function changeAge() {
  person.age += 1;
}
function changePerson() {
  Object.assign(person, { name: "李四", age: 56 });
}
function test() {
  obj.a.b.c = 888;
}
// 监听
// 情况三:监听reactive定义的对象类型数据,且默认开启深度监听
watch(person, (newVal, oldVal) => {
  console.log("person变化了", newVal, oldVal);
});
watch(obj, (newVal, oldVal) => {
  console.log("obj变化了", newVal, oldVal);
});
</script>
<style scoped>
.watch3 {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>